import React, { useState } from 'react'
import { cn } from 'clsx-for-tailwind'

export function MyButton () {

    const [selected, setSelected] = useState<number>(-1)

    const arr: string[] = [
        "tailwind",
        "react",
        "motion",
        "zustand",
        "gasp",
    ]

    return (
        <div className={'p-32 bg-slate-300'}>
            <ul className={'flex gap-5'}>
                {
                    arr.map((item, index) => (
                        <li key={index}
                            onClick={ () => setSelected(index)}
                            className={cn('bg-blue-500 px-5 py-3 text-white', selected === index && 'bg-red-500')}>
                            {item}
                        </li>
                    ))
                }
            </ul>
        </div>
    )
}
